import React, { useState,useEffect } from 'react';
import { Button, Modal, Form, Input, InputNumber, Select } from 'antd';
import {addDeductionApi,deTypeApi} from '../../../../api/wj' 
import Item from 'antd/es/list/Item';
interface prop {
    isModalOpen1: boolean;
    delBox(): void;
    getChild(): void
    value():void
}
function AddBoxAlter(props: prop) {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    //添加所有的适用行程
    const [types,setTypes] = useState<{sportId:number,sportName:string}[]>()
    //添加的具体信息
    const [addDetail,setAddDetail] = useState<any>()
    /* eslint-disable no-template-curly-in-string */
    const validateMessages = {
        required: '${label} is required!',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };
    //获取所有适用类型
    useEffect(()=>{
        deTypeApi().then((res)=>{
            console.log('AddBoxAlter==所有使用类型 res',res);
            setTypes(res.data)
        })
    },[])
    //表单发生变化是
    const onFinish = (values: any) => {
        console.log(values);
        setAddDetail(values)
        // console.log('addDetail',addDetail);
        // 后端需要数据 standard折扣标准 title:标题  deType适用行程
        addDeductionApi(values).then((res)=>{
            console.log('添加成功',res);
            if(res.code=="200"){
                //从父元素传过来的获取当页总数据的方法
                props.value()
            }
        }).catch((err)=>{
            console.log('报错了',err);
        })
        props.delBox()
    };
    const del = () => {
        props.delBox()
    }
    /* eslint-enable no-template-curly-in-string */
    return (
        <div>
            {/* open={isModalOpen} onOk={handleOk} onCancel={handleCancel} */}
            <Modal title="Basic Modal" open={props.isModalOpen1} footer={null} onCancel={props.delBox}>
                <Form
                    {...layout}
                    name="nest-messages"
                    onFinish={onFinish}
                    style={{ maxWidth: 600 }}
                    validateMessages={validateMessages}
                >
                    <Form.Item name='standard' label="抵扣标准">
                        <InputNumber />
                    </Form.Item>
                    <Form.Item name='title' label="抵扣标题">
                        <Input />
                    </Form.Item>
                    <Form.Item label="适用类型" name="type">
                        <Select>
                            {types?.map(item=>{
                                return <Select.Option value={item.sportId} key={item.sportId}>{item.sportName}</Select.Option>
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                        <Button onClick={del} htmlType="submit">
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default AddBoxAlter